<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="消息标题" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'couponName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="推送对象" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1"  placeholder="请选择"
									v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="item.id" v-for="(item,index) in user_list" :key="index">{{item.nickname}}</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

					</a-row>
					<a-row :gutter="24">
						<a-col :span="24">
							<a-form-item class="mb-15" label="消息内容" :label-col="{span:4}" :wrapper-col="{span:20}">
								<a-textarea placeholder="请输入" v-decorator="[
                    'admark',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>


				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import {
		notifycreate
	} from '@/api/newPet'
	import {
		userpage
	} from '@/api'
	import {
		roleCate
	} from '@/api/user'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				user_list:[]
			}
		},
		computed: {},
		watch: {},
		async created() {},
		components: {
			quillEditor
		},
		methods: {
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				console.log('editor change!', quill, html, text)
				this.content = html
			},
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							...this.$utils.trimValue(values)
						}
						notifycreate(data)
							.then(() => {
								this.$message.success('新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			open(data) {
				this.info = data
				console.log(data, '111111')
				this.get_user()
				if (data.id) {
					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {
					this.form.setFieldsValue({
						isEnabled: true
					})
				})

			},
			get_user() {
				userpage({
					pageNo: 1,
					pageSize: 100
				}).then(res=>{
					this.user_list=res.list;
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>